<template>
  <section>
    <!-- 面包屑 -->
      <breadcrumbs></breadcrumbs>
    <!-- <btns @exec="exec"></btns> -->
    <div class="data-container scroll-table">
      <div class="flex">
        <div class="ind-title lh50 f16">用户课程内容学习列表</div>
        <div>
          <el-button type="primary"
                     @click="returnUserStdy">返回课程学习列表</el-button>
          <el-button type="primary"
                     @click="returnCourseContentstdy">返回课程内容学习列表</el-button>
        </div>
      </div>
      <div>
        <el-form ref="searchForm"
                 :model="searchForm"
                 label-width="100px"
                 inline
                 class="demo-form-inline"
                 size='small'
                 style="border-bottom: 1px solid #f6f6f6;">
          <el-form-item label="搜索条件">
            <el-input v-model="searchForm.keywords"
                      placeholder="请输入关键字"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="search">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData"
                @selection-change="tableSelectionChange"
                style="width: 100%"
                row-key="ifId"
                border
                lazy>
        <el-table-column prop="nickname"
                         label="用户昵称"
                         align="center"> </el-table-column>
        <el-table-column prop="updatetime"
                         label="上次学习时间"
                         align="center"> </el-table-column>
        <el-table-column label="是否学完"
                         align="center">
          <template slot-scope="scope">
            <p v-if="scope.row.isStudy==1">已学完</p>
            <p v-if="scope.row.isStudy==2">未学完</p>
          </template>
        </el-table-column>
        <el-table-column label="已学习时长(秒)"
                         align="center">
          <template slot-scope="scope">
            <p>{{scope.row.duration/1000}}</p>
          </template>
        </el-table-column>
        <!-- <el-table-column label="用户操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="goUserstudyCourseList(scope.row)">查看课程内容学习详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[5, 10, 15, 20]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </section>
</template>
<style>
</style>
<script>


import btns from "@/components/btns.vue";
import breadcrumbs from "@/components/breadcrumbs.vue";
export default {
  components: {
    btns,
    breadcrumbs,

  },
  data () {
    return {
      importFileUrl: this.GLOBAL.imgBaseUrl,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      formType: "add",
      tableData: [],
      id: null,
      courseId: null,
      createForm: {},
      searchForm: {
        current: 1,
        size: 10
      },
      dialogCreateFormVisible: false,
      hasFile: false,
      headImgUrl: "",
      TypeList: [
        { id: 2, label: "视频" },
        { id: 3, label: "课件" },
      ],
      rules: {
        headImgUrl: [
          { required: true, message: "请选择课程内容封面", trigger: "change" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],
        contentUrl: [
          { required: true, message: "请上传课程内容", trigger: "change" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],

        videoNum: [
          { required: true, message: "请输入课程视频时长", trigger: "blur" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],
        Sort: [
          { required: true, message: "请输入排序序号", trigger: "blur" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],
        title: [
          { required: true, message: "请输入课程内容标题", trigger: "blur" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],
        Type: [
          { required: true, message: "请选择课程内容类型", trigger: "change" },
          // { validator: allNumValidate, trigger: 'blur' }
        ],


      }
    };
  },

  created () {
    this.id = this.$route.query.id;
    console.log(this.id)
    this.courseId = this.$route.query.courseId;
    this.getList(this.id, this.currentPage, this.pageSize);
  },
  methods: {
    returnCourseContentstdy () {
      // this.$router.push("/charts/CourseStudyList");
      this.$router.push({
        path: `/CourseContentStudy/list`,
        query: { id: this.courseId }
      })
    },
    returnUserStdy (row) {
      this.$router.push("/charts/CourseStudyList");
    },
    // 单个评论审核
    checkComment (row) {

    },
    search () {
      this.getList(this.id, this.currentPage, this.searchForm.size, this.searchForm.keywords)

    },
    handleReset () {
      this.searchForm = {
        keywords: "",
        date: []
      },

        // this.$refs.searchForm.resetFields();
        this.getList(this.searchForm.current, this.searchForm.size);
    },
    addContent (formName) {
      // console.log(this.createForm, "1------------------")
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.formType == "add") {
            let row = this.createForm;
            this.$api.course.addCourseContent({
              content: row.contentUrl,
              courseId: this.id,
              duration: row.videoNum,
              headImg: row.headImgUrl,
              sort: row.Sort,
              title: row.title,
              type: row.Type
            }).then((res) => {
              if (res.code == 200) {
                this.createForm = {},
                  this.headImgUrl = "",
                  this.hasFile = false;
                this.dialogCreateFormVisible = false;
                this.$message.success("添加成功")
                this.getList(this.id)
              }
            })
          } else {
            let row = this.createForm;
            this.$api.course.editCourseContent({
              contentId: row.contentId,
              content: row.contentUrl,
              courseId: this.id,
              duration: row.videoNum * 1000,
              headImg: row.headImgUrl,
              sort: row.Sort,
              title: row.title,
              type: row.Type
            }).then((res) => {
              if (res.code == 200) {
                this.createForm = {},
                  this.headImgUrl = "",
                  this.hasFile = false;
                this.dialogCreateFormVisible = false;
                this.$message.success("修改成功")
                this.getList(this.id)
              }
            })
          }

        }
      })
    },
    showCourseContentForm (index) {
      if (index == 1) {
        this.dialogCreateFormVisible = true;
      } else {
        this.formType = "edit"
        if (this.tableSelection.length != 1) {
          this.$message.error('请选中一行数据');
          return
        }
        var demo = this.tableSelection[0];
        console.log(demo);
        this.createForm = {
          contentUrl: demo.content,
          videoNum: demo.duration / 1000,
          Sort: demo.sort,
          title: demo.title,
          Type: demo.type,
          contentId: demo.contentId,
          headImgUrl: demo.headImg,
        }
        this.dialogCreateFormVisible = true;
      }
    },
    returnCourseList () {
      this.$router.push("/class/list")
    },
    tableSelectionChange (val) {
      this.tableSelection = val;
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.getList(this.currentPage, val);
      // eslint-disable-next-line no-console
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      this.getList(val, this.pageSize);
      // eslint-disable-next-line no-console
      // console.log(`当前页: ${val}`);
    },

    getList (id, curr, size, keyword) {
      this.$api.chart.getCourseStudyDetail({
        contentId: id,
        current: curr,
        size,
        keyword
      })
        .then((d) => {
          if (d.code == 200) {
            this.tableData = d.data;
            this.total = d.totalCount;

          }
        });
    }
  },


};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.img-feng {
  width: 120px;
  height: 120px;
}
</style>
